<template>
   <div class="articleForm">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="缩略图上传" class="images">
                <el-input v-model.trim="urlName" class="g-formInputWidth" placeholder='请上传缩略图' ></el-input>
            </el-form-item>
            <el-upload  class="upload"
                :name='uploadConfig.name'
                :action="uploadConfig.uploadeUrl"
                :multiple="false"
                :accept="uploadConfig.accept"
                :show-file-list='false'
                :http-request='submitUpload'
                :before-upload='handleBeforeUpload'
                :file-list="fileList">
                <el-button size="small" type="primary" :disabled="articleDetail&&articleDetail.status=='PUBLISHED'">图片上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过3M</div>
            </el-upload>
            <el-form-item label="缩略图URL地址" prop="url">
                <el-input v-model.trim="form.url" class="g-formInputWidth" placeholder='请输入url地址' :disabled="articleDetail&&articleDetail.status=='PUBLISHED'"></el-input>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model.trim="form.title" class="g-formInputWidth" placeholder='请输入标题' :disabled="articleDetail&&articleDetail.status=='PUBLISHED'"></el-input>
            </el-form-item>
            <el-form-item label="来源" prop="source">
                <el-input v-model.trim="form.source" class="g-formInputWidth" placeholder='请输入来源' :disabled="articleDetail&&articleDetail.status=='PUBLISHED'"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model.trim="form.author" class="g-formInputWidth" placeholder='请输入作者' :disabled="articleDetail&&articleDetail.status=='PUBLISHED'"></el-input>
            </el-form-item>
            <el-form-item label="摘要" prop="summary">
                <el-input v-model.trim="form.summary" class="g-formInputWidth" placeholder='请输入摘要' :disabled="articleDetail&&articleDetail.status=='PUBLISHED'"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
               <el-select v-model="form.type" placeholder="请选择" :disabled="articleDetail&&articleDetail.status=='PUBLISHED'">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="正文" prop="summary">
                <rich-text-box  :id='"ArticleCont"' v-if="!articleDetail||articleDetail.status=='DRAFT'"></rich-text-box>
                <span class="articleCont" v-else v-html='articleDetail.content'></span>
            </el-form-item>
        </el-form>
        <div class="elBtn" v-if="!articleDetail||articleDetail.status=='DRAFT'">
            <el-button @click="submit('DRAFT')">保存为草稿</el-button>
            <el-button @click="submit('PUBLISHED')" type="primary">发布</el-button>
        </div>
   </div>
</template>
<script>
    import richTextBox from 'components/tinymce'
    import { api, postUploadImg } from 'api/common';
    import browserMD5File from 'browser-md5-file'
    import {formRules, typeArr} from '../config'
    export default {
        components:{
            richTextBox,
        },
        props:['articleDetail'],
        watch:{
            articleDetail(val,oldval){
                this.form.url=val.imageUrl;
                this.form.type=val.type;
                this.form.summary=val.summary;
                this.form.source=val.source;
                this.form.author=val.author;
                this.form.title=val.title;
            }
        },
        created(){
            if(this.articleDetail){
                setTimeout(()=>{
                    this.setRichTextCont(this.articleDetail.content);
                },1000)  
            }
            // console.log(formRules);
            this.rules={...formRules};
            this.options=typeArr;
        },
        
        data(){
            return{
                uploadConfig:{//上传图片用的配置
                    name:'upload_file',
                    uploadeUrl:api.postUploadImg,//图片上传的链接
                    accept:"image/png,image/gif,image/jpeg,image/jpg",
                },
                fileList:[],//上传图片列表,
                urlName:'',
                options:[],
                form:{
                    url:'',
                    title:'',
                    source:'',
                    author:'',
                    summary:'',
                    type:'FOCUS_VIEW'
                },
                rules:{},
            }
        },
        methods:{
            handleBeforeUpload(file){//文件上传前
                // console.log('handleBeforeUpload', file)
                const isLt3M = file.size / 1024 / 1024 < 3;
                if (!isLt3M) {
                this.$message.error('上传图片大小不能超过 3MB!');
                }
                return isLt3M
            },
            submitUpload(obj){
                let file = obj.file
                // console.warn('submitUpload', file)
                this.urlName=file.name;
                browserMD5File(file, (err, md5)=> {
                let fd = new FormData()
                fd.append('upload_file',file)
                fd.append('file_md5',md5)
                this.postUploadImg(fd)
                });
            },
            async postUploadImg(fd){
                try{
                    let back = await postUploadImg(fd)
                    back = back.data
                    // console.log('postUploadImg', back)
                    if(back.success){
                        this.form.url=(back.file_path);
                    }else{
                        alert('图片上传失败');
                    }
                }catch(err){
                    alert('图片上传失败！');
                    console.error(err);
                }
            },
            submit(status){
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let params={
                            "author": this.form.author,
                            "content": this.getRichTextCont(),
                            "status":status,
                            "imageUrl": this.form.url,
                            "source":  this.form.source,
                            "summary":  this.form.summary,
                            "title":  this.form.title,
                            "type":  this.form.type,
                        }
                        this.$emit("submit",params);
                    } else {
                        this.$alert('请按要求输入内容', '提示', {
                                confirmButtonText: '确定',
                            })
                    return false;
                    }
                })
            },
            setRichTextCont(msg){
                if(msg && tinymce.get('ArticleCont')){
                    tinymce.get('ArticleCont').setContent(msg)
                }
            },
            getRichTextCont(){
                if(tinymce.get('ArticleCont')){
                    let cont = tinymce.get('ArticleCont').getContent();
                    return cont;
                }
            },
        }
    }
</script>
<style scoped lang="less">
    .articleForm{
        width:45rem;
        position: relative;
        .images{
            width:30rem;
        }
        .upload{
            position: absolute;
            top:0;
            right:0;
        }
        .elBtn {
            margin-left:7.5rem;
            .el-button{
                width:13rem;
                &:nth-child(2){
                    margin-left:4rem;
                }
            } 
        }
        .articleCont{
            width: 140%;
            height: 30rem;
            display: inline-block;
            overflow: auto;
            border-radius: 4px;
            border: 1px solid rgb(191, 212, 217);
        }
    }
   
</style>

